// Utility mixin expands to container edges
@mixin fill() {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

// animates max-height and visibility hidden by default, add .active to show
// boxHeight must be larger than the expected maximum height of the element
// or it will be clipped

@mixin shutterFade($boxHeight: 100px) {
    max-height: 0px;
    visibility: hidden;
    opacity: 0;
    transition-duration: 0.35s;
    transition-property: visibility, opacity, max-height;
    transition-timing-function: ease;

    &.active {
        max-height: $boxHeight;
        visibility: visible;
        opacity: 1;
    }

    &::-webkit-scrollbar {
        display: none;
    }
}
